<template>
  <div class="content-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <crumbs>内容管理</crumbs>
        <!-- <crumbs><span slot="content">内容管理</span></crumbs> -->
      </div>
      <el-form ref="contentForm" :model="reqParams" label-width="80px" size="small">
        <el-form-item label="状态：">
          <el-radio-group v-model="reqParams.status">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
            <el-radio :label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道：">
          <!-- <el-select v-model="reqParams.channel_id" @change="changeChannel" clearable  placeholder="请选择">
            <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select> -->
          <channel v-model="reqParams.channel_id"></channel>
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="dateArr"
            @change="changeDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="screen">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>根据筛选条件共查询到 {{ total }} 条结果：</span>
      </div>
      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column label="封面" width="230">
          <template slot-scope="scope">
            <el-image
              style="width: 200px; height: 150px"
              :src="scope.row.cover.images[0]"
              fit="contain">
              <div slot="error" class="image-slot">
                <img style="width: 200px; hieght: 150px" src="../../assets/images/error.gif" alt="">
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" width="400"></el-table-column>
        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0">草稿</el-tag>
            <el-tag v-if="scope.row.status === 1" type="info">待审核</el-tag>
            <el-tag v-if="scope.row.status === 2" type="success">审核通过</el-tag>
            <el-tag v-if="scope.row.status === 3" type="warning">审核失败</el-tag>
            <el-tag v-if="scope.row.status === 4" type="danger">已删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" prop="pubdate"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
             <el-button @click="editContent(scope.row.id)" type="primary" icon="el-icon-edit" circle plain></el-button>
             <el-button @click="removeContent(scope.row.id)" type="danger" icon="el-icon-delete" circle plain></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <el-pagination
        style="margin-top: 20px"
        background
        @size-change="changeSize"
        @current-change="changePage"
        :current-page="reqParams.page"
        :page-sizes="[10, 15, 20, 25, 30]"
        layout="total, prev, pager, next, sizes, jumper"
        :total="total">
      </el-pagination> -->
      <!-- 封装的分页组件 -->
      <pagination :totals="total" @pagingChange="pagingChange" @sizeChange="sizeChange"></pagination>
    </el-card>
  </div>
</template>

<script>
// 文章相关接口
import { articleList, removeContent } from '@/api/article'
export default {
  name: 'Content',
  data () {
    return {
      reqParams: {
        // 状态 0-草稿，1-待审核，2-审核通过，3-审核失败，4-已删除，不传为全部
        status: null,
        // 频道
        channel_id: null,
        // 起始时间 2019-01-01
        begin_pubdate: null,
        // 截止时间
        end_pubdate: null,
        page: 1,
        per_page: 10
      },
      total: 0,
      // 保存起始时间和截止时间的数组
      dateArr: [],
      // 表格数据
      tableData: []
    }
  },
  mounted () {
    this.getArticleList()
  },
  methods: {
    // 编辑文章
    editContent (id) {
      this.$router.push({ path: '/publish', name: 'publish', query: { id } })
    },
    // 删除文章
    removeContent (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await removeContent(id)
          this.$message.success('删除成功！')
          this.getArticleList()
        } catch (e) {
          this.$message.error('删除失败！')
        }
      }).catch(() => {
      })
    },
    // 筛选
    screen () {
      this.getArticleList()
    },
    // 接收到子组件传递过来的方法,里面有个参数就是当前选中的值
    ChangeChannel (current) {
      this.reqParams.channel_id = current
    },
    // 改变时间的时候,因为是个数组没有给传参的对象绑定值，
    // 在这需要拿到那个数组，给参数对象赋值，有值就赋值没有就赋值为null
    changeDate (currentDate) {
      if (currentDate) {
        this.reqParams.begin_pubdate = currentDate[0]
        this.reqParams.end_pubdate = currentDate[1]
      } else {
        this.reqParams.begin_pubdate = null
        this.reqParams.end_pubdate = null
      }
    },
    // 获取文章列表
    async getArticleList () {
      const { data: { data } } = await articleList(this.reqParams)
      // console.log(data)
      this.total = data.total_count
      this.tableData = data.results
    },
    pagingChange (curPage) {
      this.reqParams.page = curPage
      this.getArticleList()
    },
    // 接收子组件传递过来的数据
    sizeChange (curSize) {
      this.reqParams.page = 1
      this.reqParams.per_page = curSize
      this.getArticleList()
    }
    // 分页跳转
    // changePage (curPage) {
    //   this.reqParams.page = curPage
    //   this.getArticleList()
    // },
    // // 每页显示条数
    // changeSize (curSize) {
    //   this.reqParams.page = 1
    //   this.reqParams.per_page = curSize
    //   this.getArticleList()
    // }
  }
}
</script>

<style lang="less" scoped>
</style>
